<template>
  <div>
    <el-dialog v-model="showShareDialog" title="分享表格" width="500px">
      <div class="share-dialog-content">
        <div class="current-collaborators">
          <h4>当前协作者</h4>
          <div class="collaborator-list">
            <div v-for="user in props.permissionsUsers" :key="user._id" class="collaborator-item">
              <div class="collaborator-item-left">
                <el-avatar :size="32" :src="user.avatar">
                  {{ user.username }}
                </el-avatar>
                <span>{{ user.username }}</span>
                <span class="permission-tag">{{ user._id == props.authorId ? '创建者' : '可编辑' }}</span>
              </div>
              <el-button v-if="userStore.user._id == props.authorId && userStore.user._id != user._id" type="primary" @click="getRemove(user)">移除</el-button>
            </div>
          </div>
        </div>
        <template v-if="userStore.user._id == props.authorId">
          <el-divider>添加协作者</el-divider>
        <div class="add-collaborator-list">
          <div v-for="user in userStore.user.friendList" :key="user._id" class="add-collaborator-item">
            <template v-if="userStatus(user._id) == -1">
              <div class="add-user-left">
                <el-avatar :size="32" :src="user.avatar">
                  {{ user.username }}
                </el-avatar>
                <span>{{ user.username }}</span>
              </div>
              <el-button  type="primary" @click="getAddSheetUser(user)">邀请</el-button>
            </template>
          </div>
        </div>
        </template>
        <div class="share-link">
          <h4>分享链接</h4>
          <el-input v-model="shareLink" readonly>
            <template #append>
              <el-button @click="getCopy">复制</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage,ElMessageBox } from "element-plus";
import {deleteSheet,addSheet} from "@/api/sheet/index.ts"
import store from "@/stores/module/user.ts";
import WebSocketService from "../utils/websocket";
const showShareDialog = ref(false);
const userStore = store();
const emits = defineEmits(['removeSheetUser'])
let props = defineProps({
  permissionsUsers: {
    type: Array,
    default: () => [],
  },
  sheetId:{
    type:String,
    default:()=>""
  },
  sheetName:{
     type:String,
     default:()=>""
  },
  authorId:{
    type:String,
    default:()=>""
  }
});
const shareLink = ref(window.location.href);
const userStatus = computed(() => (item: any) => {
  const index = props.permissionsUsers.findIndex((item1) => item1._id == item)
  return index
})
const getCopy = () => {
  navigator.clipboard.writeText(shareLink.value);
  ElMessage.success("复制成功");
}
const getRemove = (user: { _id: any; })=>{
  ElMessageBox.confirm('确定移除此用户的文档权限吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    let result = await deleteSheet({id:props.sheetId,userId:user._id})
    if(result.code == 200){
      ElMessage.success("移除成功");
      const userSheetArr = props.permissionsUsers.filter((item)=>item._id != user._id)
      emits('removeSheetUser',userSheetArr)
    }else{
      ElMessage.error(result.msg);
    }
  })
}
const getAddSheetUser = async (user: unknown)=>{
  let result = await addSheet({id:props.sheetId, userId:user._id})
  if(result.code == 200){
    ElMessage.success("添加成功");
    WebSocketService.send({sendUser:JSON.parse(localStorage.getItem('user'))._id,receptionUser:user._id,type:'2',sheetName:props.sheetName,sheetId:props.sheetId})
    props.permissionsUsers.push(user)
  }else{
    ElMessage.error(result.msg);
  }
}
defineExpose({ showShareDialog });
</script>

<style scoped lang="scss">
.share-dialog-content {
  .collaborator-list {
    max-height: 150px;
    overflow-y: auto;

    .collaborator-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;

      .collaborator-item-left {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .permission-tag {
        padding: 2px 8px;
        border-radius: 4px;
        background: #f0f9eb;
        color: #67c23a;
        font-size: 12px;
      }
    }
  }

  .add-collaborator-list {
    max-height: 150px;
    overflow-y: auto;

    .add-collaborator-item {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .add-user-left {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
      }
    }
  }

  .share-link {
    margin-top: 24px;
  }
}
</style>
